<template>
  <div class="pages coupondetails" id="app">
    <div class="pageLevel">
      <div class="tableSearch">

        <el-form size="small" label-width="70px">
          <el-form-item label-width="20px">
            <el-input type="text" v-model="selectdata.keyword" placeholder="输入会员编码或名称"></el-input>
          </el-form-item>
           <el-form-item label="手机号">
            <el-input type="text" v-model="selectdata.phone" placeholder="输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="selectdata.status" placeholder="全部状态">
              <el-option label="全部状态" value></el-option>
              <el-option label="未使用" value="0"></el-option>
              <el-option label="已使用" value="1"></el-option>
              <el-option label="已过期" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label label-width="20px">
            <el-button type="primary" @click="searchSelect()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table
        ref="multipleTable"
        :data="couponTable"
        size="medium"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="memberCode"  align="center" label="会员编码">
        </el-table-column>
        <el-table-column prop="name" align="center"  label="会员名称"></el-table-column>
        <el-table-column prop="phone" align="center"  label="手机号"></el-table-column>
        <el-table-column align="center"  prop="activityName" width="100" label="获取渠道">
          <!-- <template slot-scope="scope">
              <div v-if="scope.row.channel==1">
                  优惠券直发
              </div>
              <div v-if="scope.row.channel==0">
                {{scope.row.activityName}}
              </div>
          </template> -->
        </el-table-column>
        <el-table-column prop="createTime" :formatter="createTime" align="center" label="券获取时间"></el-table-column>
        <el-table-column prop="endDate"  :formatter="endDate" align="center" label="券过期时间"></el-table-column>
        <el-table-column prop="ticketAmount" align="center" :label="typeTypename"></el-table-column>
        <el-table-column prop="status" :formatter="statuss" align="center" label="状态">
        </el-table-column>
      </el-table>
      <page-unit :pageData="pageData" :func="getTableData"></page-unit>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import pageUnit from "@/components/Page";
import state from "@/util/state";
import util from "@/util";
import { ticketUseDetail} from "@/api";
export default {
  data() {
    return {
      statuss: state.statuss,
      channel:state.channel,
      // timestamp:util.forDateAndTime,
      couponTable: [],
      ticketId:'',//优惠券id
      ticketType:'',//优惠券类型展示不同列
      typeTypename:'',//满减券:面值;体验券:体验券金额
      activity: "",
      selectdata: {
        keyword: "",
        status: "",
        phone:""
      },

      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      }
    };
  },
  components: { pageUnit },
  computed: mapState(["merchantId", "sub"]),
  mounted() {
    this.ticketId=util.getQuery().ticketId
    this.ticketType=util.getQuery().type
    this.typeTypename=this.ticketType == 1 ? '面值' : this.ticketType == 0 ? '体验券金额': '未知'
    this.getTableData(this.pageData.pageSize, 1);
  },
  methods: {
    createTime(row) {
      let year = util.foryear(parseInt(row.createTime));
      let time = util.fortime(parseInt(row.createTime));
      return year+' '+time;
    },
    endDate(row) {
      let year = util.foryear(parseInt(row.endDate));
      // let time = util.fortime(parseInt(row.endDate));
      return year;
    },
    searchSelect() {
      this.getTableData(this.pageData.pageSize, 1);
    },

    //优惠券明细列表
    getTableData(pageSize, pageNum) {
      let data = {
        ticketId: this.ticketId,
        pageSize: pageSize,
        pageNum: pageNum,
        keyword: this.selectdata.keyword,
        status: this.selectdata.status,
        phone:this.selectdata.phone
      };
      ticketUseDetail(data).then(res => {
        this.couponTable = res.data.list;
        this.pageData.totalItems = res.data.pageTotal;
      });
    }
  }
};
</script>

<style scoped>
.tableSearch {
  /* height: 114px; */
  position: relative;
  top:10px;
}
.input {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 33px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.mark {
  position: absolute;
  width: 150px;
  height: 60px;
  top: 50px;
  left: 30px;
  text-align: center;
  border: 1px solid #ccc;
  border-bottom: none;
}
.mark_p {
  width: 100%;
  height: 30px;
  margin: 0;
  font-size: 14px;
  line-height: 30px;
  border-bottom: 1px solid #ccc;
}
.el-input__inner {
  height: 33px !important;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: red;
}
.wrap_button {
  /* word-wrap: break-word; */
  /* word-break: break-all; */
  /* overflow: hidden; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.btn_color {
  color: #409eff;
  font-weight: bold;
}
</style>
